<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-1.8.3.js"></script>
    <style>
        *{
            margin: 0;
            pading: 0;
        }
        li{
            list-style: none;
            float: left;
            text-align: center;
            line-height: 30px;
            width: 80px;
            height: 30px;
            background-color: darkseagreen;
            cursor: pointer;
            margin-left: 10px;
            border-radius: 5px;
        }
        .active{
            background-color: darkgreen;
            color: white;
            text-decoration: underline;
        }
        .content{
            width: 500px;
            height: 400px;
            border: 1px solid black;
            display:none;
        }
        .content.default{
            display:inline-block;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            $("li").each(function(i){
                $(this).click(function(){
                    $(this).addClass('active').siblings().removeClass('active');
                    $(".content").eq(i).addClass('default').siblings().removeClass('default');
                });
            });
        });
    </script>
</head>
<body>
<ul>
    <li class="active">菜单一</li>
    <li>菜单二</li>
    <li>菜单三</li>
</ul>
<div>
    <div class="content default">内容一</div>
    <div class="content">内容二</div>
    <div class="content">内容三</div>
</div>
</body>
</html>